import React, { useCallback } from 'react'
import { View, Text } from '@tarojs/components'
import VideoImageCard from '@COMPONENTS/Video/VideoImageCard'
import { getHighlightHtml } from '@UTILS/highlight'
import './VideoCard.scss'

export default function VideoCard({
  data = {}, highlight = '', onClick, language
}) {
  const {
    Title, p8Id, PreviewFileName, Files = []
  } = data
  const onClickCard = useCallback(() => {
    onClick?.(p8Id)
  }, [p8Id, onClick])
  const { Length = 0 } = Files[0] || {}
  const title = Title?.[language] || ''
  let highlightHtml = title
  if (highlight) {
    highlightHtml = getHighlightHtml(title, highlight)
  }
  return (
    <View className="video-card" onClick={onClickCard}>
      <View className="video-card-content">
        <VideoImageCard fileName={PreviewFileName} length={Length} />
        <View className="video-title-container">
          <Text className="video-title">{highlightHtml}</Text>
        </View>
      </View>
    </View>
  )
}
